<template lang="pug">
  el-row
    el-col(:span="showDetailAddress ? 12 : 24")
      el-cascader(
        :size="size"
        v-if="!separate"
        v-model="currentValue"
        :options="options"
      )
      el-row(:gutter="5" v-else)
        el-col(:span="8")
          el-select.w(:size="size" placeholder="-省-" v-model="currentValue[0]" @change="valueSelect(0)")
            el-option(v-for="province in provinceList" :key="province.value" :value="province.value" :label="province.label")
        el-col(:span="8")
          el-select.w(:size="size" placeholder="-市-" v-model="currentValue[1]" @change="valueSelect(1)")
            el-option(v-for="city in cityList" :key="city.value" :value="city.value" :label="city.label")
        el-col(:span="8")
          el-select.w(:size="size" placeholder="-区/县-" v-model="currentValue[2]")
            el-option(v-for="area in areaList" :key="area.value" :value="area.value" :label="area.label")
    el-col(:span="12" v-if="showDetailAddress")
      el-input.ml5(:size="size" placeholder="详细地址" v-model="currentValue[3]")
</template>
<script>
import ssq from '@/assets/ssq'

export default {
  props: {
    value: {
      type: Array,
      default: () => ([])
    },
    separate: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    showDetailAddress: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      options: ssq
    }
  },
  computed: {
    currentValue: {
      // 通过计算属性，对.sync进行转换，外部也可以直接使用initId.sync
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
        this.$emit('valChange', val)
      }
    },
    provinceList () {
      return ssq
    },
    cityList () {
      return ssq.find(x => x.value === this.currentValue[0])?.children || []
    },
    areaList () {
      return this.cityList.find(x => x.value === this.currentValue[1])?.children || []
    }
  },
  methods: {
    valueSelect (index) {
      if (index === 0) {
        this.currentValue[1] = ''
        this.currentValue[2] = ''
      }

      if (index === 1) {
        this.currentValue[2] = ''
      }
    }
  }
}
</script>
